<template>
  <div id="app">
    <h1>{{title}}</h1>
    <input type="text" v-model="project" v-on:keyup.enter="addproject">
    <p><button v-on:click="addproject" >添加</button></p>
    <ul>
      <li v-for="(todo,index) in todos"
          :id="index" >
        <lable><span v-bind:class="{del: todo.done}">{{index+1}}.{{todo.value}}</span></lable>
        <time>{{todo.created|date}}</time>
      </li>
    </ul>
    <todo :total="todos.length" :done="done"/>
  </div>
</template>
<style>.del{text-decoration: line-through}</style>


<script>
import todo from './todo.vue'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')

  export default {
    name: 'app',

    components:{todo},

    methods: {
      addproject: function () {
        this.todos.push({value:this.project,done:false,created:new Date().getTime()});
      }
    },

    data () {
      return {
        title:'vue-todos',
        todos:[
          {value:"吃饭",done:false,created:Date.now()},
          {value:"睡觉",done:true,created:Date.now()},
          {value:"打豆豆",done:false,created:Date.now()}
        ]
      }
    },

    computed: {
      done: function () {
        var count=0;
        for(var i=0;i<this.todos.length;i++){
          if(this.todos[i].done){
            count++;
          }
        }
        return count;
      }
    },
    filters:{
      date(val)
      {
        // return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds()
        return moment(val).calendar()
      }
    }
  }
</script>


